import { defineConfig, loadEnv } from 'vite'
import path from "path"
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver'
import { createHtmlPlugin } from 'vite-plugin-html'
import autoprefixer from "autoprefixer"
import postCssPxToRem from 'postcss-pxtorem'


// https://vitejs.dev/config/
export default ({mode}) => {
  const env = loadEnv(mode, process.cwd());
  return defineConfig({
    base: './',
    plugins: [
      vue(),
      Components({
        resolvers: [VantResolver({})],
      }),
      createHtmlPlugin({
        inject: {
          data: {
            title: env.VITE_APP_TITLE
          }
        }
      })
    ],
    server: {
      
      open: true,
      host: '0.0.0.0',
      proxy: {
        [env.VITE_APP_BASE_API]: {
          target: env.VITE_APP_PROXY_API,
          changeOrigin: true, //是否允许跨域
          rewrite: (path) => path.replace(RegExp(`^${env.VITE_APP_BASE_API}`), ""), // 重写路径
        }
      }
    },
    css: {
      preprocessorOptions: {
        scss: {
          additionalData: `@import "./src/assets/styles/main.scss";`
        }
      },
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              "Android 4.1",
              "iOS 7.1",
              "Chrome > 31",
              "ff > 31",
              "ie >= 8",
            ]
          }),
          postCssPxToRem({
            // 自适应，px>rem转换
            rootValue: 75, // 75表示750设计稿，37.5表示375设计稿
            propList: ["*"], // 需要转换的属性，这里选择全部都进行转换
            selectorBlackList: [".van"], // 过滤掉van-开头的class，不进行rem转换
            exclude: "/node_modules", // 忽略包文件转换rem
          })
        ]
      }
    },
    resolve: {
      alias: {
        "@": path.resolve(__dirname, "src"),
      }
    }
  })
}
